<template>
  <div>
     <div>{{teacher.name}}</div>
    <div>{{teacher.age}}</div>
    <div>{{teacher.salary}}</div>
    <button @click="timeFly">过了一年</button>
 </div>
</template>
 
<script>
export default {
  

  data() {
    return {
      teacher:{
        name:"harry",
        age:28,
        salary:3000
      }
    };
  },
 
  watch: {
    "teacher.age" (newVal) {
      newVal === 40 ? alert('你该退休了：'+"你的工资是"+this.teacher.salary+"你的年纪是"+newVal) : ''

    },
    // "teacher": {
    //   // 组件一加载就会调用handler
    //   immediate:true,

    //   // 深度监听
    //   depp:true,

    //   // 需要监听的事物改变了要做什么
    //   handler(newVal,oldVal) {
    //     newVal === 40 ? alert('你该退休了：'+"你的工资是"+this.teacher.salary+"你的年纪是"+newVal) : ''
    //   }
    // }
  },
  
  methods: {
    timeFly() {
      this.teacher.age += 1
      this.teacher.salary += 500
    }
  }
};
</script>

<style scoped>
     
</style>